<template>
  <div class="dialog">
    <el-dialog v-model="dialogVisible" title="详情" @close="closeDoalog">
      <el-descriptions
        :border="detailDialogConfig.border"
        :column="detailDialogConfig.column"
        :direction="detailDialogConfig.direction"
        :size="detailDialogConfig.size"
        :title="detailDialogConfig.title"
        :extra="detailDialogConfig.extra"
      >
        <template v-for="(item, index) of detailDialogConfig.descriptionsItem" :key="index">
          <template v-if="item.type === 'img'">
            <el-descriptions-item
              :label="item.label"
              :span="item.span"
              :width="item.width"
              :min-width="item.minWidth"
              align="center"
              label-align="left"
              :class-name="item.className"
              :label-class-name="item.labelClassName"
            >
              <img :src="detailData[item.prop]" alt="" style="width: 100px; height: 100px" />
            </el-descriptions-item>
          </template>
          <template v-else>
            <el-descriptions-item
              :label="item.label"
              :span="item.span"
              :width="item.width"
              :min-width="item.minWidth"
              :align="item.align"
              :label-align="item.labelAlign"
              :class-name="item.className"
              :label-class-name="item.labelClassName"
            >
              {{ detailData[item.prop] }}
            </el-descriptions-item>
          </template>
        </template>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const dialogVisible = ref<boolean>(false)

//定义props
const props = defineProps({
  detailDialogConfig: {
    type: Object,
    default() {
      return {
        //Descriptions Attributes
        border: {
          //是否带有边框
          type: Boolean,
          default: true,
        },
        column: {
          //一行 Descriptions Item 的数量
          type: Number,
          default: 2,
        },
        direction: {
          //排列的方向
          type: String,
          default: "horizontal",
        },
        size: {
          //列表的尺寸
          type: String,
          default: "",
        },
        title: {
          //标题文本，显示在左上方
          type: String,
          default: "",
        },
        extra: {
          //操作区文本，显示在右上方
          type: String,
          default: "",
        },

        //DescriptionsItem Attributes
        descriptionsItem: {
          type: Array as any,
          default: () => [],
        },
      }
    },
  },
})

const emit = defineEmits(["refresh"])

//定义内部的属性
const detailData = ref()

/**
 * 设置模态框的可见性
 *
 * @param itemData 任意类型的数据，用于展示在模态框中
 */
function setModalVisible(itemData: any) {
  dialogVisible.value = true
  detailData.value = itemData
}
/**
 * 关闭对话框
 *
 * @description 将对话框的显示状态设置为隐藏，并重置表单字段，同时触发刷新事件
 */
function closeDoalog() {
  dialogVisible.value = false
  emit("refresh")
}

// 暴露的属性和方法
defineExpose({ setModalVisible })
</script>

<style lang="less" scoped></style>
